<template>
  <div class="video-container" >
    <div  class="videoPlay">
      <live-player
        class="video"
        ref="player"
        :videoUrl="videoUrl"
        v-loading="loading"
        fluent
        autoplay
        live
        stretch></live-player>
    </div>
    <div class="videoControl" id="video_dialog">
      <div class="video_button">
        <el-button type="primary" @click="play(players)" >播放</el-button>
        <el-button type="primary" @click="stop()">暂停</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
//需要用到的接口
export default {
  data() {
    return {
      camidList: [],
      players: [],
      token: '',
      code: '',
      serial: '',
      command: '',
      streamID: '',
      videoUrl: '',
      loading: false
    }
  },
  components: {
    LivePlayer
  },
  mounted() {
    this.getChannels()
  },
  methods: {
// 播放
    play: function () {
      this.$refs.livePlayer.play();
    },
    // 暂停
    pause: function () {
      this.$refs.livePlayer.pause();
    },
    // 外部API获取快照
    snap: function () {
      this.$refs.livePlayer.snap();
    },
    // 外部快照回调
    snapOutside: function (snapData) {
      console.log(snapData)
    }
  }
}
</script>
<style>
.video-container {
  display: flex;
  flex-flow: row nowrap;
}
.video {
  width: 100%;
}
.videoControl {
  width: 30%;
}
.video_button {
  margin-top: 20px;
  margin-left: 30px;
}
.videoPlay {
  width: 60%;
}
</style>
